import { useEffect } from "react"

const Canvas = () => {


  // 其实就是将函数定义好，然后在函数曲线上将点画出来再连成线的过程

  function getX(t) {
    return 5 * (12 * Math.sin(t) - 4 * Math.sin(3 * t));
  }

  function getY(t) {
    return (-5 *(13 * Math.cos(t) -5 * Math.cos(2 * t) -2 * Math.cos(3 * t) -Math.cos(4 * t)));
  }

  useEffect(() => {
    const testNode = document.querySelector('#test')
    let ctx = null
    ctx = testNode.getContext("2d") ;
    //设置初始弧度
    let radian = 0;
    //设置弧度增量，每次增加1°

    let radian_add = Math.PI / 180;
    //开始绘图
    ctx.beginPath();
    // 重新映射画布上的 (0,0) 位置
    ctx.translate(100, 60);
    // 设置绘制起点
    ctx.moveTo(getX(radian), getY(radian));
    // 弧度小于等于360°
    while (radian <= Math.PI * 2) {

      //每增加一次
      radian += radian_add;

      let X = getX(radian);

      let Y = getY(radian);

      ctx.lineTo(X, Y);
    }
    ctx.strokeStyle = "red";
    ctx.stroke();
  }, [])

  return (
    <div style={{width: '100%', height: '100%'}}>
      <canvas style={{width: 500, height: 500, marginLeft: 20, marginTop: 20}} id="test"></canvas>
    </div>
  )
}

export default Canvas